<template>
  <a-modal v-model:visible="visible" width="45vw" title="修改佣金及比例" unmount-on-close @close="onClose">
    <page-form class="page-form" :model="form" layout="vertical" :rules="rules" ref="formRef" :gutter="56">
      <page-form-item label="订单总额" size="1/2"> {{ record.orderAmount }} </page-form-item>
      <page-form-item label="OTA对账总额" size="1/2"> {{ record.settlementTotalAmount }} </page-form-item>
      <page-form-item field="commissionRate" label="本单抽佣比例" size="1/2">
        <i-input-number v-model="form.commissionRate" :min="0" :max="100" :precision="2" unit="%" @change="commissionRateChange" />
      </page-form-item>
      <page-form-item field="commissionAmount" label="佣金总额" size="1/2">
        <i-input-number v-model="form.commissionAmount" />
      </page-form-item>
      <page-form-item field="remark" label="备注" size="1">
        <a-textarea placeholder="请输入" v-model="form.remark" :max-length="100" show-word-limit />
      </page-form-item>
    </page-form>
    <template #footer>
      <a-space>
        <a-button @click="onClose">关闭</a-button>
        <a-button type="primary" @click="onConfirm" :loading="okLoading">确认</a-button>
      </a-space>
    </template>
  </a-modal>
</template>

<script setup name="EditBrokerageModal">
  import { ref } from 'vue'
  import { getCommissionInfo, editCommission } from '@/api/finance/examine'
  import { Notification } from '@arco-design/web-vue'
  import calculation from '@/utils/calculation'
  console.log("🐳 > fdff:", calculation.mul);

  const emits = defineEmits(['ok'])

  const visible = ref(false)
  const open = (record) => {
    visible.value = true
    getDetail(record)
  }

  const onClose = () => {
    okLoading.value = false
    visible.value = false
  }

  const okLoading = ref(false)
  const onConfirm = () => {
    okLoading.value = true
    const param = {
      ...form.value,
    }
    editCommission(param)
      .then(() => {
        Notification.success('修改成功')
        onClose()
        emits('ok')
      })
      .finally(() => {
        okLoading.value = false
      })
  }

  const rules = {
    commissionRate: { required: true, message: '请输入' },
    commissionAmount: { required: true, message: '请输入' },
  }
  const form = ref({})
  const record = ref({})
  const getDetail = (recordV) => {
    getCommissionInfo({ id: recordV.id }).then((res) => {
      const data = res.result
      record.value = data
      form.value = {
        id: recordV.id,
        commissionRate: data.commissionRate,
        commissionAmount: data.commissionAmount,
        remark: '',
      }
    })
  }

  // 佣金比例变化
  const commissionRateChange = (value) => {
    if (value == 0) {
      form.value.commissionAmount = 0
      return
    }
    const amount = record.value.settlementTotalAmount
    const rate = value / 100
    form.value.commissionAmount = calculation.mul(amount, rate)
  }

  defineExpose({
    open,
  })
</script>

<style lang="less" scoped>
  .page-form {
    min-height: 300px;
    overflow-x: hidden;
    width: 100%;
  }
</style>
